<template>
  <div>
    <div class="select_top">
      <el-select v-model="codeflag" placeholder="工资类型" clearable @change="changeflag">
        <el-option
          v-for="item in wageType"
          :key="item.hash.code_id"
          :label="item.hash.code_name"
          :value="item.hash.code_id"
        ></el-option>
      </el-select>
      <el-select v-model="wdate" style="margin:0 10px" placeholder="日期"
        :disabled="codeflag==''"
      >
        <el-option
          v-for="item in wdateList"
          :key="item.hash.wdate"
          :label="item.hash.wdate"
          :value="item.hash.wdate"
        ></el-option>
      </el-select>
      <!-- <el-date-picker
        clearable
        style="margin:0 10px"
        v-model="wdate"
        type="date"
        :pickerOptions="pickerOptions"
        :disabled="codeflag==''"
        valueFormat="yyyy-MM-dd"
        placeholder="选择日期"
      ></el-date-picker> -->
      <el-input placeholder="输入部门" style="width:20%;margin:0 10px" v-model="worgname" clearable></el-input>
      <el-input placeholder="输入姓名" style="width:20%;margin:0 10px" v-model="uname" clearable></el-input>
      <el-button @click="gettableList">查询</el-button>
      <!-- <el-button style="float:right" type="primary">审核</el-button> -->
    </div>
    <wagelist :tableList="tableList" :headList="headList" v-if="alive"></wagelist>
  </div>
</template>
<script>
import wagelist from '~/components/list/wageList.vue';

export default {
  data() {
    return {
      ts: this.newStore(),
      alive: true,
      codeflag: '',
      wdate: '',
      worgname: '',
      uname: '',
      wdateList: [],
      wageType: [],
      tableList: [],
      headList: [],
      tableCopyTableList: [],
      // pickerOptions: {

      //   disabledDate: (time) => {
      //     for (let i = 0; i < this.wdateList.length; i += 1) {
      //       if (this.wdateList[i].hash.wdate == time.getTime()) {
      //         return false;
      //       }
      //     }
      //     return true;
      //   },
      // },
    };
  },
  components: {
    wagelist,
  },
  created() {
    this.getwageType();
    // this.gettableList();
  },
  methods: {
    changeflag(val) {
      this.wdate = '';
      this.tableList = [];
      this.reload();
      const req = {
        handle: '5A4A3E4E20E0D8E9F649FA99F50A3FE0D12821C7AB79A383C85F6131D883C036A4FAC5F547223AE6',
        wcodeflag: val,
        wstatus: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.wdateList = ts.d.data.operation1;
      });
    },
    reload() {
      this.alive = false;
      this.$nextTick(() => {
        this.alive = true;
      });
    },
    // 获取工资类型
    getwageType() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '1',
        codetype: '02',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.wageType = ts.d.data.operation1;
      });
    },
    // 获取工资查询列表
    gettableList() {
      console.log('in gettableList');

      if (this.codeflag == '') {
        this.$message({
          type: 'error',
          message: '请先选择工资类型',
        });
        return;
      }
      if (this.wdate == '') {
        this.$message({
          type: 'error',
          message: '请先选择日期',
        });
        return;
      }

      this.headList = [];
      const req = {
        handle:
          '5A4A3E4E20E0D8E9DF4D9F70BB944481CBA5FDB6D7C691356A677D1C1AAE06F9',
        wstatus: '1',
        wcodeflag: this.codeflag,
        wdate: this.wdate,
        worgname: this.worgname,
        uname: this.uname,
      };
      this.spost(this.ts, '/mainservlet', req)
        .then((ts) => {
          this.tableList = ts.d.data.operation1;

          if (this.tableList.length > 0) {
            for (const key in this.tableList[0].hash) {
              if (
                key != 'id' &&
                  key != 'uid' &&
                  key != 'uname' &&
                  key != 'wdate' &&
                  key != 'worgname' &&
                  key != 'worgid' &&
                  key != 'wstatus'
              ) {
                this.headList.push(key);
              }
            }
          }
          this.reload();
        });
    },
  },
};
</script>
<style lang="stylus" scoped>
.select_top {
  width: 92%;
  margin: 20px auto;
}
</style>

